<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格美化器 - 在线工具</title>
    <script src="css/tailwindcss.js"></script>
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body class="bg-gradient-to-br from-light to-gray-100 font-inter min-h-screen flex flex-col" style="background: linear-gradient(135deg, #F8FAFC 0%, #F3F4F6 100%);">
    <!-- 导航栏 -->
    <div id="navbar-container"></div>

    <!-- 主要内容 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <!-- 页面标题 -->
        <div class="text-center mb-8" style="animation: fadeInUp 0.6s ease-out both;">
            <h1 class="text-4xl font-bold text-gray-800 mb-4">
                <i class="fa fa-table text-blue-500 mr-3"></i>
                <span class="text-primary">表格</span>美化器
            </h1>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                快速美化您的表格，支持多种样式主题，一键生成HTML代码，让您的表格更加专业美观
            </p>
        </div>

        <!-- 工具区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
            <!-- 左侧：数据输入和预览区域 -->
            <div class="lg:col-span-3 space-y-6" style="animation: fadeInUp 0.8s ease-out both; animation-delay: 0.2s;">
                <!-- 数据输入区域 -->
                <div class="bg-white rounded-xl shadow-xl border border-gray-100 p-6 card-hover" style="animation: fadeInUp 0.6s ease-out both; animation-delay: 0.3s;">
                    <h3 class="text-lg font-bold text-gray-800 mb-4">
                        <i class="fa fa-edit text-blue-500 mr-2"></i>
                        数据输入
                    </h3>
                    
                    <!-- 输入方式选择 -->
                    <div class="mb-4">
                        <div class="flex space-x-3 mb-4">
                            <button id="textInputBtn" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm btn-hover">
                                <i class="fa fa-keyboard-o mr-2"></i>文本输入
                            </button>
                            <button id="fileInputBtn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors text-sm btn-hover">
                                <i class="fa fa-upload mr-2"></i>文件上传
                            </button>
                        </div>
                    </div>

                    <!-- 文本输入区域 -->
                    <div id="textInputArea" class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">表格数据（支持制表符、逗号分隔）</label>
                            <textarea id="tableDataInput" 
                                    class="w-full h-24 p-3 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
                                    placeholder="请输入表格数据，例如：&#10;姓名	年龄	城市&#10;张三	25	北京&#10;李四	30	上海&#10;王五	28	广州"></textarea>
                        </div>
                        <div class="flex space-x-3">
                            <button id="parseDataBtn" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm">
                                <i class="fa fa-magic mr-2"></i>解析数据
                            </button>
                            <button id="clearDataBtn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors text-sm">
                                <i class="fa fa-trash mr-2"></i>清空
                            </button>
                        </div>
                    </div>

                    <!-- 文件上传区域 -->
                    <div id="fileInputArea" class="space-y-4 hidden">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">上传CSV或Excel文件</label>
                            <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center">
                                <input type="file" id="fileInput" accept=".csv,.xlsx,.xls" class="hidden">
                                <i class="fa fa-cloud-upload text-3xl text-gray-400 mb-3"></i>
                                <p class="text-gray-600 mb-1 text-sm">点击选择文件或拖拽到此处</p>
                                <p class="text-xs text-gray-500">支持 CSV、Excel 格式</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 表格预览区域 -->
                <div class="bg-white rounded-xl shadow-xl border border-gray-100 p-6 card-hover" style="animation: fadeInUp 0.6s ease-out both; animation-delay: 0.4s;">
                    <h3 class="text-lg font-bold text-gray-800 mb-4">
                        <i class="fa fa-eye text-green-500 mr-2"></i>
                        实时预览
                    </h3>
                    <div id="tablePreview" class="border border-gray-200 rounded-lg p-4 min-h-80 bg-gray-50">
                        <div class="text-center text-gray-500 py-8">
                            <i class="fa fa-table text-4xl mb-4"></i>
                            <p>请先输入表格数据</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧：样式控制区域 -->
            <div class="lg:col-span-2 space-y-6" style="animation: fadeInUp 0.8s ease-out both; animation-delay: 0.4s;">
                <!-- 样式主题 -->
                <div class="bg-white rounded-xl shadow-xl border border-gray-100 p-4 card-hover" style="animation: fadeInUp 0.6s ease-out both; animation-delay: 0.5s;">
                    <h3 class="text-lg font-bold text-gray-800 mb-3">
                        <i class="fa fa-paint-brush text-purple-500 mr-2"></i>
                        样式主题
                    </h3>
                    <div class="grid grid-cols-4 gap-2">
                        <button class="theme-btn p-2 border-2 border-blue-500 bg-blue-50 rounded-lg text-center" data-theme="classic">
                            <div class="w-full h-6 bg-blue-500 rounded mb-1"></div>
                            <span class="text-xs font-medium">经典商务</span>
                        </button>
                        <button class="theme-btn p-2 border-2 border-gray-300 bg-gray-50 rounded-lg text-center" data-theme="modern">
                            <div class="w-full h-6 bg-gray-600 rounded mb-1"></div>
                            <span class="text-xs font-medium">现代简约</span>
                        </button>
                        <button class="theme-btn p-2 border-2 border-gray-300 bg-gray-50 rounded-lg text-center" data-theme="academic">
                            <div class="w-full h-6 bg-gray-800 rounded mb-1"></div>
                            <span class="text-xs font-medium">学术风格</span>
                        </button>
                        <button class="theme-btn p-2 border-2 border-gray-300 bg-gray-50 rounded-lg text-center" data-theme="colorful">
                            <div class="w-full h-6 bg-gradient-to-r from-purple-500 to-pink-500 rounded mb-1"></div>
                            <span class="text-xs font-medium">彩色主题</span>
                        </button>
                        <button class="theme-btn p-2 border-2 border-gray-300 bg-gray-50 rounded-lg text-center" data-theme="elegant">
                            <div class="w-full h-6 bg-gradient-to-r from-indigo-500 to-purple-600 rounded mb-1"></div>
                            <span class="text-xs font-medium">优雅紫</span>
                        </button>
                        <button class="theme-btn p-2 border-2 border-gray-300 bg-gray-50 rounded-lg text-center" data-theme="warm">
                            <div class="w-full h-6 bg-gradient-to-r from-orange-400 to-red-500 rounded mb-1"></div>
                            <span class="text-xs font-medium">温暖橙</span>
                        </button>
                        <button class="theme-btn p-2 border-2 border-gray-300 bg-gray-50 rounded-lg text-center" data-theme="fresh">
                            <div class="w-full h-6 bg-gradient-to-r from-green-400 to-blue-500 rounded mb-1"></div>
                            <span class="text-xs font-medium">清新绿</span>
                        </button>
                        <button class="theme-btn p-2 border-2 border-gray-300 bg-gray-50 rounded-lg text-center" data-theme="minimal">
                            <div class="w-full h-6 bg-gradient-to-r from-gray-200 to-gray-400 rounded mb-1"></div>
                            <span class="text-xs font-medium">极简灰</span>
                        </button>
                    </div>
                </div>

                <!-- 样式设置 -->
                <div class="bg-white rounded-xl shadow-xl border border-gray-100 p-4 card-hover" style="animation: fadeInUp 0.6s ease-out both; animation-delay: 0.6s;">
                    <h3 class="text-lg font-bold text-gray-800 mb-3">
                        <i class="fa fa-cog text-orange-500 mr-2"></i>
                        样式设置
                    </h3>
                    <div class="space-y-4">
                        <!-- 边框设置 -->
                        <div>
                            <h4 class="text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fa fa-square-o text-orange-500 mr-1"></i>
                                边框设置
                            </h4>
                            <div class="space-y-3">
                                <div>
                                    <label class="block text-xs font-medium text-gray-700 mb-1">边框样式</label>
                                    <select id="borderStyle" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                                        <option value="solid">实线</option>
                                        <option value="dashed">虚线</option>
                                        <option value="dotted">点线</option>
                                        <option value="triple">三线框</option>
                                        <option value="none">无边框</option>
                                    </select>
                                </div>
                                <div class="grid grid-cols-2 gap-2">
                                    <div>
                                        <label class="block text-xs font-medium text-gray-700 mb-1">边框粗细</label>
                                        <select id="borderWidth" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                                            <option value="1px">1px</option>
                                            <option value="2px">2px</option>
                                            <option value="3px">3px</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-700 mb-1">边框颜色</label>
                                        <input type="color" id="borderColor" value="#d1d5db" class="w-full h-8 border border-gray-300 rounded-lg">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 颜色设置 -->
                        <div>
                            <h4 class="text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fa fa-palette text-pink-500 mr-1"></i>
                                颜色设置
                            </h4>
                            <div class="grid grid-cols-2 gap-2">
                                <div>
                                    <label class="block text-xs font-medium text-gray-700 mb-1">表头背景色</label>
                                    <input type="color" id="headerBgColor" value="#f8f9fa" class="w-full h-8 border border-gray-300 rounded-lg">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-700 mb-1">表头文字颜色</label>
                                    <input type="color" id="headerTextColor" value="#374151" class="w-full h-8 border border-gray-300 rounded-lg">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-700 mb-1">单元格背景色</label>
                                    <input type="color" id="cellBgColor" value="#ffffff" class="w-full h-8 border border-gray-300 rounded-lg">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-700 mb-1">文字颜色</label>
                                    <input type="color" id="textColor" value="#374151" class="w-full h-8 border border-gray-300 rounded-lg">
                                </div>
                            </div>
                        </div>

                        <!-- 字体设置 -->
                        <div>
                            <h4 class="text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fa fa-font text-indigo-500 mr-1"></i>
                                字体设置
                            </h4>
                            <div class="grid grid-cols-2 gap-2">
                                <div>
                                    <label class="block text-xs font-medium text-gray-700 mb-1">字体大小</label>
                                    <select id="fontSize" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                                        <option value="12px">12px</option>
                                        <option value="14px" selected>14px</option>
                                        <option value="16px">16px</option>
                                        <option value="18px">18px</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-700 mb-1">对齐方式</label>
                                    <select id="textAlign" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm">
                                        <option value="left">左对齐</option>
                                        <option value="center" selected>居中对齐</option>
                                        <option value="right">右对齐</option>
                                    </select>
                                </div>
                            </div>
                            <div class="mt-2">
                                <div class="flex items-center">
                                    <input type="checkbox" id="headerBold" checked class="mr-2">
                                    <label for="headerBold" class="text-xs font-medium text-gray-700">表头加粗</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 输出区域 -->
        <div class="mt-6 bg-gradient-to-br from-green-50 to-blue-50 rounded-xl shadow-xl border border-green-200 p-4 card-hover" style="animation: fadeInUp 0.8s ease-out both; animation-delay: 0.7s;">
            <h3 class="text-lg font-bold text-gray-800 mb-3">
                <i class="fa fa-download text-green-500 mr-2"></i>
                下载导出
            </h3>
            
            <!-- 下载选项 -->
            <div class="flex flex-wrap gap-2 mb-4">
                <button id="downloadPngBtn" class="download-btn px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors shadow-md hover:shadow-lg text-sm btn-hover">
                    <i class="fa fa-image mr-2"></i>下载PNG
                </button>
                <button id="downloadSvgBtn" class="download-btn px-4 py-2 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition-colors shadow-md hover:shadow-lg text-sm btn-hover">
                    <i class="fa fa-file-image-o mr-2"></i>下载SVG
                </button>
                <button id="downloadWordBtn" class="download-btn px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors shadow-md hover:shadow-lg text-sm btn-hover">
                    <i class="fa fa-file-word-o mr-2"></i>下载Word
                </button>
            </div>

        </div>
    </main>

    <!-- 页脚 -->
    <div id="footer-container"></div>

    <script src="js/navbar.js"></script>
    <script src="js/footer.js"></script>
    <script src="js/table-beautifier.js"></script>
    
    <style>
        /* 表格美化器自定义样式 */
        .theme-btn {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .theme-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .theme-btn.selected {
            border-color: #3b82f6 !important;
            background-color: #dbeafe !important;
        }
        
        /* 表格预览区域样式 */
        #tablePreview {
            min-height: 200px;
            overflow-x: auto;
            background: white;
            border-radius: 8px;
            padding: 16px;
        }
        
        #tablePreview table {
            width: 100% !important;
            border-collapse: collapse !important;
            margin: 0 !important;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        
        #tablePreview th,
        #tablePreview td {
            padding: 8px 12px;
            text-align: center;
            font-size: 14px;
            white-space: nowrap;
        }
        
        /* 默认样式，但允许内联样式覆盖 */
        #tablePreview th {
            font-weight: bold;
        }
        
        /* 确保内联样式优先级 */
        #tablePreview table[style] {
            border-collapse: collapse !important;
        }
        
        /* 文件上传区域样式 */
        #fileInputArea .border-dashed {
            transition: all 0.3s ease;
        }
        
        #fileInputArea .border-dashed:hover {
            border-color: #3b82f6;
            background-color: #f8fafc;
        }
        
        /* 代码输出区域样式 */
        #codeOutput {
            background-color: #1f2937;
            color: #10b981;
            padding: 1rem;
            border-radius: 0.5rem;
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
            line-height: 1.5;
            white-space: pre-wrap;
            word-wrap: break-word;
            max-height: 400px;
            overflow-y: auto;
        }
        
        /* 按钮悬停效果 */
        button {
            transition: all 0.2s ease;
        }
        
        button:hover {
            transform: translateY(-1px);
        }
        
        /* 输入框焦点效果 */
        input:focus,
        select:focus,
        textarea:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        /* 导航栏样式修复 */
        .text-primary {
            color: #165DFF !important;
        }
        
        .text-dark {
            color: #1E293B !important;
        }
        
        .bg-primary\/10 {
            background-color: rgba(22, 93, 255, 0.1) !important;
        }
        
        .hover\:bg-primary\/20:hover {
            background-color: rgba(22, 93, 255, 0.2) !important;
        }
        
        .hover\:text-primary:hover {
            color: #165DFF !important;
        }
        
        .transition-all-300 {
            transition: all 300ms ease-in-out !important;
        }
        
        /* Logo链接样式 */
        .navbar-logo {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .navbar-logo:hover {
            opacity: 0.8;
            transform: scale(1.02);
        }
        
        .navbar-logo:hover .fa-graduation-cap {
            transform: rotate(5deg);
        }
        
        /* 页面加载动画 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 卡片悬停动画 */
        .card-hover {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            border-color: rgba(59, 130, 246, 0.2);
        }
        
        /* 输出区域特殊悬停效果 */
        .card-hover.bg-gradient-to-br:hover {
            border-color: rgba(34, 197, 94, 0.3);
            box-shadow: 0 20px 25px -5px rgba(34, 197, 94, 0.1), 0 10px 10px -5px rgba(34, 197, 94, 0.04);
        }
        
        /* 按钮悬停动画 */
        .btn-hover {
            transition: all 0.2s ease;
        }
        
        .btn-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* 下载按钮特殊样式 */
        .download-btn {
            position: relative;
            overflow: hidden;
        }
        
        .download-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }
        
        .download-btn:hover::before {
            left: 100%;
        }
        
        /* 页面背景渐变 */
        body {
            background: linear-gradient(135deg, #F8FAFC 0%, #F3F4F6 100%) !important;
            min-height: 100vh;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .grid-cols-1.lg\\:grid-cols-2 {
                grid-template-columns: 1fr;
            }
        }
    </style>
</body>
</html>
